<template>
  <div class="teacherSyllabusContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <table class="table" cellspacing="0">
          <thead class="thead">
            <tr>
              <td style="width: 4rem;">课节序号</td>
              <td style="width: 4rem;">课节名称</td>
              <td style="width: 6rem;">课节时长</td>
              <td style="width: 6rem;">课节资源</td>
              <td style="width: 6rem;">教参资源</td>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="item,index in teacherSyllabusList">
              <td>{{item.orderBy}}次课</td>
              <td>{{item.syllabusName == null?"未命名":item.syllabusName}}</td>
              <td>{{item.oneSyllabusDuration}}分钟</td>
              <td>
                <div class="syllabusRes" @click="goSyllabus(item)">查看课节资源</div>
              </td>
              <td>
                <div class="syllabusRes" @click="goReference(item)">查看教参资源</div>
              </td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          class="page"
          layout="total, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      title: "",
      courseType:"",
      dialogFormVisible: false,
      tabledisplayObj: {
        libraryCourseId: "",
        courseId:"",
        currPage: 1,
        pageSize: 10,
        total: 0
      },
      teacherSyllabusList: []
    };
  },
  methods: {
    //查看教参资源
    goReference(item) {
    	var path = vm.$store.state.permit["44"].path;
    	if(!path) {
      	tool.message({showClose: true, message: "当前用户缺少权限", type: 'warning'});
      	return;
      }
      let routeData = this.$router.resolve({
        path: path,
        query: { classSyllabusId: item.syllabusId, index: 2 }
      });
      window.open(routeData.href);
    },
    //查看课节资源
    goSyllabus(item) {
    	var path = vm.$store.state.permit["44"].path;
    	 if(!path) {
      	tool.message({showClose: true, message: "当前用户缺少权限", type: 'warning'});
      	return;
      }
      let routeData = this.$router.resolve({
        path: path,
        query: { classSyllabusId: item.syllabusId, index: 1 }
      });
      window.open(routeData.href);
    },
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.tabledisplayObj.libraryCourseId = data.libraryCourseId;
      vm.tabledisplayObj.courseId = data.courseId;
      vm.title = data.title;
      vm.courseType = data.courseType;
      vm.initData();
    },
    initData() {
      api.librarySyllabusList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.isEdit = false;
          });
          vm.tabledisplayObj.total = data.totalCount;
          vm.teacherSyllabusList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      vm.initData();
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.teacherSyllabusList = [];
        vm.tabledisplayObj = {
          libraryCourseId: "",
          currPage: 1,
          pageSize: 10,
          total: 0
        };
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.teacherSyllabusContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .nameEdit {
    margin-left: 0.1rem;
    cursor: pointer;
  }

  .syllabusRes {
    text-decoration: underline;
    color: #3885f8;
    font-size: 0.16rem;
    cursor: pointer;
  }

  .right_btn {
    width: 1rem;
    height: 0.38rem;
    line-height: 0.38rem;
    float: right;
    font-size: 0.16rem;
    font-weight: bold;
    border-radius: 0.1rem;
    text-align: center;
    cursor: pointer;
    background-color: #3885f8;
    color: white;
  }

  .right_btn:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  padding: 0.2rem !important;
  margin-bottom: 0.3rem !important;
}
</style>
